<template>
  <div>
    <el-transfer
      style="text-align: left; display: inline-block;"
      :v-model.sync="valueArr"
      filterable
      :titles="['未选标签列表', '已选中标签列表']"
      :button-texts="['删除', '添加']"
      :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
      @change="transferChange"
      :data.sync="options">
      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
    </el-transfer>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        valueArr:this.value,
      }
    },
    props:{
      value:{
        default:[1]
      },
      options:{
        default:[]
      },
      event:{
        default:''
      },
    },
    created(){
    },
    mounted(){
    },
    watch:{
      value(val){
        this.valueArr = val
      },
    },
    methods:{
      //穿梭框change事件
      transferChange(value, direction, movedKeys) {
        // console.log(value, direction, movedKeys);
        this.$emit(this.event,value)
      },
    },
  }
</script>

<style>
 .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
</style>